<template>
  <div>
    <logo-img></logo-img>
    <b-container class="p-1 pt-lg-1 pb-lg-1 pl-lg-3 pr-lg-3">
      <b-breadcrumb class="bg-white xr-shad mt-1 mb-0">
        <b-breadcrumb-item href="/">
          <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
          萧然技术博客
        </b-breadcrumb-item>
        <b-breadcrumb-item href="#" active>{{titleName}}</b-breadcrumb-item>
      </b-breadcrumb>
    </b-container>
    <b-container class="p-1 pt-lg-0 pb-lg-1 pl-lg-3 pr-lg-3">
      <b-row class="m-0">
        <b-col class="col-lg-7 col-md-12 col-sm-12 mt-1 p-0 pl-lg-0 pr-lg-1">
          <b-card :header="titleName" header-tag="header" body-class="p-2 p-lg-3">
            <el-radio-group v-model="selectDefault" size="medium" @change="selectChange">
              <el-radio-button label="按时间排序"></el-radio-button>
              <el-radio-button label="按热度排序"></el-radio-button>
            </el-radio-group>
            <article-list :data="data.records"></article-list>
            <el-pagination
              background
              layout="prev, pager, next"
              pager-count="5"
              :total="data.total"
              :current-page="data.current"
              @current-change="handleCurrentChange"
              class="text-right mt-3">
            </el-pagination>
          </b-card>
        </b-col>
        <b-col class="col-lg-5 d-lg-block d-none mt-1 p-0 pl-lg-1 pr-lg-0">
          <article-intro :data="introdata"></article-intro>
        </b-col>
      </b-row>
    </b-container>
    <copy-info></copy-info>
  </div>
</template>
<script>
export default {
  name: 'AllAr',
  created () {
    // const loading = this.$loading({
    //   lock: true,
    //   text: '页面渲染中，请稍候',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // })
    // setTimeout(() => {
    //   loading.close()
    // }, 1500)
    this.allArData(1)
    this.getintrodata(10)
  },
  methods: {
    allArData: async function (currentpage) {
      const orderBy = this.$route.params.orderBy
      const rst = await this.axios.get('getAllAr/' + this.$route.params.cid + '/' + currentpage + '/' + orderBy)
      this.data = JSON.parse(rst.data.data)
      this.titleName = this.data.records[0].name
      document.title = this.titleName + ' - 萧然技术博客'
      console.log(this.llqTitle)
      if (orderBy === 'create_time') this.selectDefault = '按时间排序'
      else this.selectDefault = '按热度排序'
    },
    getintrodata: async function (num) {
      const rst = await this.axios.get('getIntroAr/' + num)
      this.introdata = JSON.parse(rst.data.data)
    },
    handleCurrentChange: function (rst) {
      this.allArData(rst)
      this.$route.params.page = rst
    },
    selectChange: function (val) {
      let rule = ''
      if (val === '按时间排序') {
        rule = 'create_time'
      } else if (val === '按热度排序') {
        rule = 'reader'
      } else {
        rule = 'error'
      }
      this.$router.push({
        name: 'middleAllAr',
        params: {
          cid: this.$route.params.cid,
          page: 1,
          orderBy: rule
        }
      })
    }
  },
  data () {
    return {
      data: {},
      introdata: {},
      currentpage: 1,
      titleName: '',
      selectDefault: '',
      llqTitle: ''
    }
  },
  watch: {
    $route (to, from) {
      this.allArData(to.params.page)
    }
  }
}
</script>
<style>
  .xr-shad {
    box-shadow: 0 1px 12px #ccc;
  }
</style>
